<template>
  <page-header-wrapper :title="false">
    <a-card title="证书分类" style="width:600px">
      <template slot="extra">
        <a-button type="primary" icon="plus" size="small" @click="addType">添加分类</a-button>
      </template>
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.id"
        :columns="typeColumns"
        :data="typeData"
      >
      </s-table>
    </a-card>
    <a-modal
      title="添加分类"
      v-model="visible"
      @ok="onSubmit"
    >
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >
        <a-form-model-item label="分类名称">
          <a-input v-model="addForm.title" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import shopColumns from '@/columns/tm.shop'
import { addCertType, getCertTypeList } from '@/api/tm.shop'
export default {
  components: {
    STable
  },
  name: 'CertType',
  data () {
    return {
      addForm: {},
      addRules: {},
      typeColumns: shopColumns.cert_type,
      typeData: parameters => {
        return getCertTypeList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      visible: false,
      queryParam: {}
    }
  },
  methods: {
    addType () {
      this.visible = true
    },
    onSubmit () {
      const app = this
      app.$refs.addForm.validate(valid => {
        if (valid) {
          addCertType(app.addForm).then(res => {
            if (res.status === 0) {
              app.visible = false
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
